window.onload = function () {
    let search = document.getElementById('sear');
    let gIndex = 0;
    let goods = ['电脑','台灯','小米平板 Pro5','超声波清洗器','扫地机器人'];
    setInterval(() => {
        search.placeholder = goods[gIndex];
        gIndex++;
        if(gIndex === goods.length) gIndex = 0;
    }, 3000);

  let s1 = document.getElementsByClassName('smd-tem1'); 
  let s2 = document.getElementsByClassName('smd-tem2');
  let h = document.getElementsByClassName('hot');  
  let w = document.getElementsByClassName('wear');
  let ha = [];
  let wa = [];

  for (let i = 0; i < w.length; i++) {
    wa.push(w[i].firstElementChild);
    w[i].onmousemove = function () {
      wa[i].className = 'hover';
      ha[i].className = '';
      ha[i].style.color = '#333';
      ha[i].style.borderBottom = 'none';
      s2[i].style.display = 'block';
      s1[i].style.display = 'none';
    }
    ha.push(h[i].firstElementChild);
    h[i].onmousemove = function () {
      ha[i].className = 'hover';
      wa[i].className = '';
      s1[i].style.display = 'block';
      s2[i].style.display = 'none';
    }
  }
  
  let tab1 = document.getElementsByClassName('tab1');
  let tab2 = document.getElementsByClassName('tab2');
  let tab3 = document.getElementsByClassName('tab3');
  let tab4 = document.getElementsByClassName('tab4');

  let mod1 = document.getElementsByClassName('mod1');
  let mod2 = document.getElementsByClassName('mod2');
  let mod3 = document.getElementsByClassName('mod3');
  let mod4 = document.getElementsByClassName('mod4');

  for(let i = 0; i < tab1.length; i++){
    tab1[i].onmouseenter = function(){
      this.className = 'tab1 mineSty';
      tab2[i].className = 'tab2 otherSty';
      tab3[i].className = 'tab3 otherSty';
      tab4[i].className = 'tab4 otherSty';
      mod1[i].style.display = 'block';
      mod2[i].style.display = 'none';
      mod3[i].style.display = 'none';
      mod4[i].style.display = 'none';
    };
    tab2[i].onmouseenter = function(){
      this.className = 'tab2 mineSty';
      tab1[i].className = 'tab1 otherSty';
      tab3[i].className = 'tab3 otherSty';
      tab4[i].className = 'tab4 otherSty';
      mod2[i].style.display = 'block';
      mod1[i].style.display = 'none';
      mod3[i].style.display = 'none';
      mod4[i].style.display = 'none';
    };
    tab3[i].onmouseenter = function(){
      this.className = 'tab3 mineSty';
      tab1[i].className = 'tab1 otherSty';
      tab2[i].className = 'tab2 otherSty';
      tab4[i].className = 'tab4 otherSty';
      mod3[i].style.display = 'block';
      mod1[i].style.display = 'none';
      mod2[i].style.display = 'none';
      mod4[i].style.display = 'none';
    };
    tab4[i].onmouseenter = function(){
      this.className = 'tab4 mineSty';
      tab1[i].className = 'tab1 otherSty';
      tab2[i].className = 'tab2 otherSty';
      tab3[i].className = 'tab3 otherSty';
      mod4[i].style.display = 'block';
      mod1[i].style.display = 'none';
      mod2[i].style.display = 'none';
      mod3[i].style.display = 'none';
    };

  }


  let top = document.getElementsByClassName('toTop')[0];
  let html = document.getElementsByTagName('html')[0];
  html.addEventListener('wheel', distance);
  html.addEventListener('mousemove', distance);
  top.addEventListener('click', function () {
    
    
    let ID = setInterval(() => {
      let num = document.documentElement.scrollTop;
      if(num > 0){
        num -= 30;
        document.documentElement.scrollTop = num;
        console.log(num);
      }else{
        clearInterval(ID);
      } 
    }, 1);
  });

  function distance() {
    let srctop = document.documentElement.scrollTop;
    if (srctop >= 860) {
      top.style.display = 'block';
    } else {
      top.style.display = 'none';
    }
  }
};